<template>
  <div class="debug-page">
    <h2>用户信息调试</h2>
    
    <el-card>
      <template #header>
        <h3>用户存储信息</h3>
      </template>
      
      <div class="debug-info">
        <p><strong>是否已认证:</strong> {{ userStore.isAuthenticated }}</p>
        <p><strong>Token:</strong> {{ userStore.token ? '存在' : '不存在' }}</p>
        <p><strong>用户信息:</strong> {{ userStore.userInfo ? '存在' : '不存在' }}</p>
        
        <div v-if="userStore.userInfo">
          <h4>用户详细信息:</h4>
          <pre>{{ JSON.stringify(userStore.userInfo, null, 2) }}</pre>
          
          <h4>头像URL:</h4>
          <p>{{ userStore.userInfo.avatar_url || '无头像' }}</p>
          
          <h4>头像预览:</h4>
          <el-avatar 
            v-if="userStore.userInfo.avatar_url" 
            :src="userStore.userInfo.avatar_url" 
            :size="100"
            fit="contain"
          />
          <p v-else>无头像显示</p>
        </div>
      </div>
      
      <div class="debug-actions">
        <el-button @click="refreshUserInfo" :loading="loading">刷新用户信息</el-button>
        <el-button @click="clearUserInfo">清除用户信息</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const loading = ref(false)

const refreshUserInfo = async () => {
  loading.value = true
  try {
    await userStore.getUserInfo()
    ElMessage.success('用户信息刷新成功')
  } catch (error) {
    ElMessage.error('用户信息刷新失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

const clearUserInfo = () => {
  userStore.userInfo = null
  ElMessage.info('用户信息已清除')
}
</script>

<style scoped>
.debug-page {
  padding: 20px;
}

.debug-info {
  margin-bottom: 20px;
}

.debug-info pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

.debug-actions {
  display: flex;
  gap: 10px;
}
</style>
